<template>
  <view :class="[`${prefixCls}-login-container`]">
    <!-- navbar -->
    <cu-navbar />
    <!-- logo -->
    <view class="login-logo">
      <uv-image width="308rpx" height="86rpx" :src="$CDN('/common/static/images/logo.png')"></uv-image>
    </view>
    <!-- 登录授权内容 -->
    <view class="login-wrapper">
      <!-- <view class="title">
        <view class="main">{{ curAuthTypeKey ? AuthTypeEnum[curAuthTypeKey].name : '' }}</view>
        <view class="sub"> {{ curAuthTypeKey ? AuthTypeEnum[curAuthTypeKey].desc || '' : '' }}</view>
      </view> -->

      <view class="form">
        <!-- 账号密码登录 -->
        <!-- <cu-login-account v-if="authType === AuthTypeEnum.ACCOUNT.type" /> -->

        <!-- 手机验证码登录 -->
        <cu-login-mobile v-if="authType === AuthTypeEnum.MOBILE.type" @onSuccess="LoginSuccessCb" />

        <!-- 忘记密码 -->
        <!-- <cu-forgot-password v-if="authType === AuthTypeEnum.FORGOTPWD.type" /> -->

        <!-- 修改密码 -->
        <!-- <cu-change-password v-if="authType === AuthTypeEnum.CHANGEPWD.type" /> -->

        <!-- #ifdef MP || H5 -->
        <!-- 绑定手机号 只用在小程序或公众号环境-->
        <!-- <cu-bind-mobile v-if="authType === AuthTypeEnum.BINDMOBILE.type && ['miniProgram', 'officialAccount'].includes($Platform.platform)" @onSuccess="LoginSuccessCb" /> -->
        <!-- #endif -->
      </view>

      <!-- 第三方登录 -->
      <!-- #ifdef APP-PLUS -->
      <view class="login-third" v-if="false">
        <uv-divider text="第三方账号登录"></uv-divider>

        <!-- 第三方 -->
        <view class="wrapper">
          <uv-button type="primary" :hairline="false" shape="circle" icon="apple-fill" iconSize="26px" iconColor="#000" :customStyle="{ padding: '0 5px' }"></uv-button>
          <uv-button type="success" :hairline="false" shape="circle" icon="weixin-fill" iconSize="26px" iconColor="#fff" :customStyle="{ padding: '0 5px' }"></uv-button>
        </view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { AuthTypeEnum } from '@/common/enums/userEnum'
import { mapGetters } from 'vuex'

export default {
  name: 'login',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      AuthTypeEnum,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'authType']),

    // 当前授权方式key
    curAuthTypeKey() {
      let AuthTypeKey = ''
      for (const key in AuthTypeEnum) {
        if (AuthTypeEnum[key].type === this.authType) {
          AuthTypeKey = key
          break
        } else AuthTypeKey = ''
      }
      return AuthTypeKey
    },
  },
  // 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成
  onLoad(options) {
    console.log('🚀 ~ onLoad ~ options:', options)
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  onBackPress(e) {
    console.log(e)
  },
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    LoginSuccessCb() {
      const { redirect } = this.$Route.query
      this.$ROUTE.redirect(redirect ? decodeURIComponent(decodeURIComponent(redirect)) : '/pages/main/home')
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('login-container')} {
  position: relative;
  min-height: calc(100% - 330rpx);
  padding: 300rpx 30rpx 30rpx;
  background: #fff cdn('/common/static/images/login_bg.png') no-repeat top center / contain;
  overflow: hidden;
  .login-logo {
    width: 308rpx;
    height: 86rpx;
    margin: 0 auto 120rpx;
    overflow: hidden;
  }

  .login-wrapper {
    .title {
      text-align: center;
      .main {
        font-size: 36rpx;
      }
      .sub {
        margin-top: 20rpx;
        color: $uv-info;
      }
    }

    .login-third {
      margin-top: 60rpx;
      .wrapper {
        @include flex;
        justify-content: space-around;
        .uv-button--normal {
          padding: 0;
        }
      }
    }
  }
}
</style>
